<template>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="menu-container">
        <el-menu
    default-active="2"
    class="el-menu-vertical-demo custom-menu"
    @open="handleOpen"
    @close="handleClose"
    background-color="#fff"
      text-color="#808080"
      active-text-color="#fff">
    <el-submenu
      v-for="(item, index) in menuList"
      :key="index"
      :index="index.toString()">
      <template slot="title">
      <span>{{ item.deviceName }}</span>
      </template>
      <el-menu-item
        v-for="(subItem, subIndex) in item.typeList"
        :key="subIndex"
        :index="`${index}-${subIndex}`"
        @click.native="handleMenuItemClick(subItem)">
        {{ subItem.typeName }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
  </div>
      </el-col>
      <el-col :span="20">
        <div class="button-container">
          <el-button type="primary" @click="batchSendMail()">批量制定计划</el-button>
        </div>
        <div class="content-area">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            width="55">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="equipmentName"
              label="设备"
              width="120">
            </el-table-column>
            <el-table-column
              prop="equipmentType"
              label="类型"
              width="120">
            </el-table-column>
            <el-table-column
              prop="zhanquName"
              label="站区"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="deadlineTime"
              label="检修状态"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.deadlineTime > 0">已超期{{ scope.row.deadlineTime }}天</span>
                <span v-else>还有{{ Math.abs(scope.row.deadlineTime) }}天后超期</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="openDialogVisible(scope.row)">制定计划</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :total="total"
            :current-page.sync="curentPage"
            :page-sizes="[5,20,50]"
            :page-size="5"
            @size-change="sizeData"
            @current-change="pageData"
          />
        </div>
      </el-col>
      <div>
      <el-dialog
        title="制定维修计划"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>通知维修人员多少天后进行维修工作:</span>
        <br><br>
        <el-input v-model="day" type="number" style="width: 30%;" placeholder="输入天数"></el-input>
        &nbsp;&nbsp;天
        <br><br>
        <span>选择维修人员:</span>
        <br><br>
        <el-select v-model="value" multiple placeholder="请选择">
          <el-option
            v-for="item in staff"
            :key="item.jobNumber"
            :label="item.staffName"
            :value="item.jobNumber">
            <span style="float: left">{{ item.staffName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNumber }}</span>
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sunbmitPlan()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    </el-row>
  </template>
  
  <script>
  import timePlan from '@/api/maintenancePlan/timePlan'
import { time } from 'echarts';
  export default {
    data() {
      return {
        menuList:[],
        tableData: [],
        dialogVisible: false,
        staff: [],
        value: [],
        day: '',
        multipleSelection: [],
        operateDevice:'',
        valueJson: [],
        searchMap: {
        curPage: 1,
        pageSize: 5,
        eqId: ''
        },
        curentPage: 1,
        total: 0,
      };
    },
    created() {
      this.fetchMenuList()
    },
    methods: {

    sizeData(limit) {
      console.log(limit)
      this.searchMap.pageSize = limit
      this.fetchMaintList()
    },
    pageData(page) {
      this.searchMap.curPage = page
      this.fetchMaintList()
    },

      fetchMenuList(){
        timePlan.fetchMenuList().then(res => {
          this.menuList = res.data
        })
      },

      fetchMaintList(){
        timePlan.fetchBileiqiList(this.searchMap).then(res =>{
          this.tableData = res.data.records;
          this.total = res.data.total;
        })
      },

      handleMenuItemClick(item){
        console.log("Get List!")
        this.searchMap.eqId = item.eqId;
        timePlan.fetchBileiqiList(this.searchMap).then(res =>{
          this.tableData = res.data.records;
          this.total = res.data.total;
        })
      },
      sunbmitPlan(){
        if (!this.multipleSelection || this.multipleSelection.length === 0){
        this.multipleSelection.push( this.operateDevice);
        }
        const jsonData = {
          maint: this.multipleSelection,
          day: this.day,
          mailTo: this.value
        }
        const jsonString = JSON.stringify(jsonData,this.replacer);
        timePlan.sendMail(jsonString).then(
          this.$message({
            type: 'success',
            message: "发送成功"
          })
        );
        this.dialogVisible = false;
      },
    batchSendMail() {
      timePlan.fetchStaffList().then(res =>{
          this.staff = res.data;
        })
      this.dialogVisible = true;
  },
      
      replacer(key, value) {
        if (key === 'circularReference') {
          return undefined; // 排除循环引用
        }
        return value;
      },

      handleOpen() {
        console.log("Open");
      },
      handleClose() {
        console.log("Close");
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      openDialogVisible(val){
        timePlan.fetchStaffList().then(res =>{
          this.staff = res.data;
        })
        this.dialogVisible = true;
        this.operateDevice = val;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
  </script>
  
  <style scoped>
  /* .content-area {
    padding: 20px;
  } */
  .el-table {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1); /* 投影效果 */
  }
  .custom-menu {
  width: 100%; /* 确保菜单填满父容器 */
  max-height: 700px; /* 限制菜单的最大高度 */
  overflow-y: scroll; /* 如果内容超出最大高度，显示滚动条 */
}
.el-menu-item {
  color: #808080; /* 深灰色字体 */
}
.el-menu-item.is-active {
  background-color: #007bff; /* 天蓝色背景 */
  color: #fff; /* 白色字体 */
}
.el-menu-item:hover {
  background-color: #007bff; /* 天蓝色背景 */
  color: #fff; /* 白色字体 */
}
.menu-container {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0; /* Adjust this value as needed */
  height: 100%; /* Ensure the container takes up the full height of its parent */
  overflow-y: auto; /* Allow scrolling within the container */
}
.button-container {
  display: flex;
  justify-content: flex-end; /* 将按钮置于最右方 */
  margin-bottom: 20px; /* 底部间隔 */
  margin-top: 20px;
}
  </style>
  